<template>
  <div id="app">
    <!-- router-link 标签 to属性会变成一个a标签 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>

    <!-- tag属性 可以变成其他类型的标签 -->
    <router-link to="/home" tag="button">首页button测试tag</router-link>
    <router-link to="/about" tag="li">关于li测试tag</router-link>

    <!-- 加上个replace属性，会用history.replaceState方法 不会记录历史记录，浏览器不能前进后退 -->
    <router-link to="/home" tag="button" replace>首页button加了replace属性</router-link>

    <router-link to="/about" tag="li" replace>关于li加了replace属性</router-link>

    <!-- 通过methods进行跳转 -->
    <button @click="gohome">方法的方式到首页</button>
    <button @click="goabout">方法的方式到关于</button>

    <!-- 
    routerview控制组件的显示位置，这个是表示在下方显示
    <router-view></router-view> -->

    <hr />
    <p style="align: center">下面的内容演示动态路径，显示userid</p>
    <!-- 这里用vbind获得服务器传来的数据 传给$route user.vue里面通过$route.parms去拿数据-->
    <router-link v-bind:to="/user/ + userId">用户</router-link>

    <!-- query方式给router传数据 to属性必须用vbind才能解析对象语法 一次传多个数据 -->
    <router-link :to="{ path: '/usercenter', query: query }">
    个人中心
    </router-link>
    <!-- 方法+query的方式传数据 -->
    <button @click="showmessage">数据传递按钮</button>

    <!-- 被keepalive包裹的元素，都不会被频繁创建和销毁 -->
    <!-- exclude除了的意思，about组件还是会被频繁创建和销毁 -->
    <keep-alive exclude="about">
    <!-- router-view 代表所有组件 -->
    <router-view></router-view>
    </keep-alive>
  </div>


</template>

<script>
export default {
  name: "App",
  methods: {
    gohome() {
      // $router 方式进行跳转
      this.$router.push("/home");
    },
    goabout() {
      // 这个是不能后退的
      this.$router.replace("/about");
    },
    showmessage() {
      // push方法带两个参数 一个path 一个query
      this.$router.push({
        path: "/usercenter",
        query: {
          name: "lin",
          age: 22,
          height: 199,
        },
      });
    },
  },
  data() {
    return {
      userId: "9759",
      query: {
        name: "lin",
        age: 22,
        height: 199,
      },
    };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* .router-link-active{
  color: yellow;
} */
/* index.js里面配置了router-link-active的别名 这里表示被点击的DOM元素都会加上这个标签 */
.active {
  color: yellow;
}
</style>
